Ext.require('Ext.layout.container.Accordion');
Ext.require('Ext.tree.Panel');
Ext.require('Ext.data.TreeStore');

Ext.define('MxSt.view.Viewport', {
	extend: 'Ext.container.Viewport',

	layout: 'border',
	requires: [
		'Ext.layout.container.Border'
	],

	initComponent: function() {
		Ext.apply(this, {
			items: [
				{
					region: 'west',

					layout:'accordion',
					collapsible: true,
					resizable: true,
					minWidth: 150,
					maxWidth: 300,
					width: 300,

					title: 'Configuration',

					items: [
						{
							xtype: 'treepanel',
							title: 'Simple Tree',
							store: Ext.create('Ext.data.TreeStore', {
								root: {
									expanded: true,
									text:"",
									user:"",
									status:"",
									children: [
										{ text:"detention", leaf: true },
										{ text:"homework", expanded: true,
											children: [
												{ text:"book report", leaf: true },
												{ text:"alegrbra", leaf: true}
											]
										},
										{ text: "buy lottery tickets", leaf:true }
									]
								}
							}),
							rootVisible: false
						},
						{
							html: 'Hello world'
						}
					]
				}, {
				 //TODO: here should be placed a panel with a certain background
				 region: 'center',
				 xtype: 'userPanel'
				 }
			]
			//TODO: TBD
		});

		this.callParent(arguments);
	}
});
